<template>
<div class="flex justify-center">
<div class="card max-w-2xl">
  <div class="card-header">
    Login
  </div>
  <div class="card-body">
  <form>
  <div class="row">
    <div class="">
      <div class="mb-3 row">
        <label class="col-sm-2 col-form-label">Name</label>
        <div class="col-sm-10">
          <input v-model="userName" type="text" class="form-control">
        </div>
      </div>
    </div>
    <div class="">
      <div class="mb-3 row">
        <label class="col-sm-2 col-form-label">password</label>
        <div class="col-sm-10">
          <input v-model="userPassword" type="password" class="form-control">
        </div>
      </div>
    </div>
  </div>
  <a v-on:click="login()" class="btn btn-primary">Submit</a>
  </form>
  </div>
</div>
</div>
</template>


<script>
export default {
  name: 'Login',
  data() {
    return {
      userId: '',
      userName: '',
      userEmail: '',
      userPassword: '',
    };
  },
  methods: {
    async login() {
      if (!(this.userName === '' || this.userPassword === '')) {
        this.$store.dispatch('connect', {
          id: this.userId, name: this.userName, email: this.userEmail, password: this.userPassword
        });
        this.$router.push({ path: '/' });
      }
    },
  },
};
</script>
